import {
  Button,
  Col,
  Drawer,
  Row,
  Space,
  Tabs,
} from 'antd';
import { useState } from 'react';
import { EditableProTable } from '@ant-design/pro-components';
import { ChromeOutlined, RedoOutlined } from '@ant-design/icons';
import { IOrderTime } from '@/utils/types';
import _ from 'lodash';
import {
  DAYS, getColumns, getMaxKey, IDay, isWorkDay,
} from './constants';
import style from './index.module.less';
import { useOrderTime } from './hooks';

interface IProps {
  id:string,
  onClose:(isReload?: boolean) => void
}

/**
* 课程编辑
*/
const OrderTime = ({ onClose, id }:IProps) => {
  const [currentDay, setCurrentDay] = useState<IDay>(DAYS[0]);
  const onTabChangeHandler = (key:string) => {
    const current = DAYS.find((item) => item.key === key) as IDay;
    setCurrentDay(current);
  };

  const {
    orderTime,
    loading,
    onDeleteHandler,
    onSaveHandler,
    allWeekSyncHandler,
    allWorkDaySyncHandler,
  } = useOrderTime(id, currentDay.key);
  return (
    <Drawer
      title="编辑可约时间"
      onClose={() => onClose()}
      width={720}
      open
      forceRender // 强制render，用于内部内容还没加载时的报错
    >
      <Tabs
        type="card"
        items={DAYS}
        onChange={onTabChangeHandler}
      />
      {/* 使用可编辑的表格 */}
      <EditableProTable<IOrderTime>
        loading={loading}
        headerTitle={(
          <Space>
            选择
            <span className={style.name}>
              {currentDay.label}
            </span>
            的课开放预约的时间
          </Space>
        )}
        rowKey="key"
        value={orderTime}
        columns={getColumns(
          onDeleteHandler,
        )}
        // 新增创建
        recordCreatorProps={{
          record: () => ({
            key: getMaxKey(orderTime) + 1,
            startTime: '12:00:00',
            endTime: '12:30:00',
          }),
        }}
        editable={{
          onSave: async (rowKey, d) => {
            // 修改，编辑
            let newData = [];
            if (orderTime?.findIndex((item:any) => item.key === rowKey) > -1) {
              console.log('orderTime', orderTime, rowKey);
              // 取出当天那一行的预约时间的数据进行更新
              newData = orderTime?.map((item) => (item.key === rowKey ? _.omit(d, 'index') : { ...item }));
              console.log('newData', newData);
            } else {
              // 新增
              newData = [...orderTime, _.omit(d, 'index')];
            }
            console.log('newData', newData);
            onSaveHandler(newData);
          },
          onDelete: async (key) => {
            onDeleteHandler(key as number);
          },
        }}
      />
      <Row gutter={20} className={style.buttons}>
        <Col span={12}>
          <Button
            icon={<RedoOutlined />}
            style={{ width: '100%' }}
            type="primary"
            disabled={!isWorkDay(currentDay.key)}
            onClick={allWorkDaySyncHandler}
          >
            全工作日同步
          </Button>
        </Col>
        <Col span={12}>
          <Button
            icon={<ChromeOutlined />}
            style={{ width: '100%' }}
            danger
            onClick={allWeekSyncHandler}
          >
            全周同步
          </Button>
        </Col>
      </Row>
    </Drawer>
  );
};

export default OrderTime;
